<template>
  <div>
    <a-modal
      title="添加用户"
      :visible="props.show"
      @ok="submit"
      @cancel="close"
    >
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="用户名">
          <a-input v-model:value="addForm.username" />
        </a-form-item>
        <a-form-item label="密码">
          <a-input v-model:value="addForm.password" />
        </a-form-item>
        <a-form-item label="角色">
          <a-select v-model:value="addForm.character">
            <a-select-option
              v-for="item in store.state.characterInfo"
              :key="item._id"
              :value="item._id"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { message } from 'ant-design-vue'
import { defineComponent, reactive } from 'vue'
import { handleResult } from '../../helpers/utils'
import { userService } from '../../services'
import store from '../../store'
export default defineComponent({
  props: {
    show: Boolean
  },
  setup (props, ctx) {
    const { characterInfo } = store.state
    const addForm = reactive({
      username: '',
      password: '',
      character: characterInfo[0]._id
    })

    /** 提交添加用户窗口 */
    const submit = async () => {
      const res = await userService.addUser(addForm)
      handleResult(res).success(({ msg }) => {
        message.success(msg)
        ctx.emit('update')
      })
      close()
    }
    /** 关闭添加用户窗口 */
    const close = () => {
      ctx.emit('update:show', false)
    }
    return { addForm, props, submit, close, store }
  }
})
</script>

<style lang="scss" scoped></style>
